
Page({
	data: {
		tempCanvasWidth: 0,
		tempCanvasHeight: 0,
		imageViewHeight: 0,
		minScale: 0.5,
		maxScale: 3,
		rotate: 0,
		tempImageSrc: null,
		originImageSrc: null,
		imgTop: 0,
		imgLeft: 0,
		imgWidth: 0,
		imgHeight: 0,
		isCroper: !1, // 图片裁剪框
		cutW: 0,
		cutH: 0,
		cutL: 0,
		cutT: 0,
		deviceRatio: 0 // 初始化裁剪
	},
	_data: {
		deviceRatio: 1,
		oldScale: 1,
		newScale: "",
		startX: "",
		startY: "",
		initRatio: "",
		scaleWidth: "",
		scaleHeight: "",
		initScaleWidth: "",
		initScaleHeight: "",
		touchX: "",
		touchY: "",
		imgLeft: "",
		imgTop: "",
		initLeft: "",
		initTop: "",
		oldDistance: "",
		croperX: "",
		croperY: "",
		dragStartX: "",
		dragStartY: "",
		initDragCutW: "",
		initDragCutH: "",
		scaleSwitch: false,
		cropperSwitch: false
	},
	onLoad: function() {
		/**
		 *  deviceRatio 算出比例 当前手机width宽度和750的宽度
		 *  imageViewHeight 当前图片的高度 屏幕的高度减去底部的高度
		 */
		this.initCropper();
		this.setData({
			tempImageSrc: "../../images/river.jpg",
			originImageSrc: "../../images/river.jpg"
		});
		this.reloadImage();
	},
	initCropper() {
		const { windowWidth, windowHeight } = wx.getSystemInfoSync();
		const deviceRatio = windowWidth / 750;
		const imageViewHeight = windowHeight - 140 * deviceRatio;
		this._data.deviceRatio = deviceRatio;
		this.setData({
			imageViewHeight
		});
	},
	reloadImage: function() {
		/**
		 * 上传图片获取图片的信息
		 * data tempImageSrc 图片的路径
		 * oldScale
		 * initRatio 图片的高和可用视图高度的比例
		 * startY  图片初始位置
		 * startX 图片初始位置
		 * initScaleWidth  图片的宽
		 * initScaleHeight 图片的高
		 * imgLeft  图片距离left
		 * imgLeft  图片距离left
		 */
		var t = this;
		const _data = this._data;
		let { deviceRatio, oldScale } = _data;
		let { imageViewHeight } = this.data;
		wx.getImageInfo({
			src: t.data.tempImageSrc,
			success: i => {
				// t.oldScale = 1;
				_data.oldScale = 1;
				_data.initRatio = i.height / imageViewHeight;
				// 判断图片是否宽大于图片高的比例 如果大于就选用图片的宽作为比例
				if (_data.initRatio < i.width / (750 * deviceRatio)) {
					_data.initRatio = i.width / (750 * deviceRatio);
				}
				_data.scaleWidth = i.width / _data.initRatio; //算出图片的
				_data.scaleHeight = i.height / _data.initRatio; //算出图片的
				_data.initScaleWidth = _data.scaleWidth; //
				_data.initScaleHeight = _data.scaleHeight; //
				_data.startX = (750 * deviceRatio) / 2 - _data.scaleWidth / 2;
				_data.startY = imageViewHeight / 2 - _data.scaleHeight / 2;
				t.setData({
					imgLeft: _data.startX,
					imgTop: _data.startY,
					imgWidth: _data.scaleWidth,
					imgHeight: _data.scaleHeight
				});
				this.startCrop();
			},
			complete: function() {
				wx.hideLoading();
			}
		});
	},
	saveImageFromTempCanvas: function(t) {
		var i = t.delay,
			e = t.success,
			a = t.fail,
			c = this;
		setTimeout(function() {
			wx.canvasToTempFilePath({
				x: 0,
				y: 0,
				width: c.data.tempCanvasWidth,
				height: c.data.tempCanvasHeight,
				fileType: "jpg",
				quality: 1,
				canvasId: "tempCanvas",
				success: function(t) {
					wx.previewImage({
						urls: [t.tempFilePath]
					}),
						e(t);
				},
				fail: function(t) {
					a(t);
				}
			});
		}, i);
	},
	uploadScaleControl(t) {
		const _data = this._data;
		if (t.touches.length > 1) {
			_data.scaleSwitch = true;
			_data.cropperSwitch = false;
		}
		if (_data.cropperSwitch) {
			return true;
		}
		if (t.touches.length <= 1) {
			return true;
		}
		return false;
	},

	croperStart: function(t) {
		//裁剪盒子拖动
		// croperX 初始位置
		// croperY
		const _data = this._data;

		_data.croperX = t.touches[0].clientX;
		_data.croperY = t.touches[0].clientY;
	},
	croperMove: function(t) {
		const _data = this._data;
		//裁剪盒子移动
		let { deviceRatio } = this._data;
		let { imageViewHeight } = this.data;

		var i = this,
			e = t.touches[0].clientX - _data.croperX,
			a = t.touches[0].clientY - _data.croperY,
			c = Math.max(0, i.data.imgLeft),
			n = Math.max(0, i.data.imgTop),
			o = Math.min(
				750 * deviceRatio - i.data.cutW,
				i.data.imgLeft + i.data.imgWidth - i.data.cutW
			),
			r = Math.min(
				imageViewHeight - i.data.cutH,
				i.data.imgTop + i.data.imgHeight - i.data.cutH
			),
			s = i.data.cutL + e,
			h = i.data.cutT + a;
		if (s < c) {
			s = c;
		}
		if (s > o) {
			s = o;
		}
		if (h < n) {
			h = n;
		}
		if (h > r) {
			h = r;
		}
		_data.croperX = t.touches[0].clientX;
		_data.croperY = t.touches[0].clientY;
		this.setData({
			cutL: s,
			cutT: h
		});
	},
	dragPointStart: function(t) {
		// 拖动开始
		//
		// dragStartX
		// dragStartY
		// initDragCutW
		// initDragCutH

		var i = this;
		let { deviceRatio } = this._data;
		let { imageViewHeight } = this.data;
		const _data = this._data;

		var	e = Math.min(750 * deviceRatio, i.data.imgLeft + i.data.imgWidth);
		var	a = Math.min(imageViewHeight, i.data.imgTop + i.data.imgHeight);


		_data.dragStartX = t.touches[0].clientX;
		_data.dragStartY = t.touches[0].clientY;
		_data.dragStartX=Math.min(_data.dragStartX,e);
		_data.initDragCutW = i.data.cutW;
		_data.initDragCutH = i.data.cutH;
	},
	dragPointMove: function(t) {
		let { deviceRatio } = this._data;
		let { imageViewHeight,cutW,cutL,cutH,cutT,imgWidth,imgHeight } = this.data;
		const _data = this._data;

		var i = this;
		var	e = Math.min(750 * deviceRatio, i.data.imgLeft + i.data.imgWidth);
		var	a = Math.min(imageViewHeight, i.data.imgTop + i.data.imgHeight);
		var	c = Math.min(t.touches[0].clientX, e);
		var	n = Math.min(t.touches[0].clientY, a);
		_data.dragStartX=Math.min(_data.dragStartX,e);
		var	o = c - _data.dragStartX;
		var	r = n - _data.dragStartY;
		//防止过度 放大

		if (o + _data.initDragCutW >= 0 && r + _data.initDragCutH >= 0) {
			if((cutL+_data.initDragCutW + o)>=(e)){
				return;
			}
			if((cutT+_data.initDragCutH + o)>=(a)){
				return;
			}
			i.setData({
				cutW: _data.initDragCutW + o,
				cutH: _data.initDragCutH + r
			});
		}
	},
	selectPhoto: function() {
		/**
		 * 上传图片
		 *  data  tempImageSrc 上传的图片的路径
		 *  data  originImageSrc 上传的图片的路径
		 */
		var t = this;
		wx.chooseImage({
			sourceType: ["album", "camera"],
			count: 1,
			success: function(i) {
				t.setData({
					tempImageSrc: i.tempFilePaths[0],
					originImageSrc: i.tempFilePaths[0]
				});
				t.reloadImage();
			},
			fail: function(t) {}
		});
	},
	rotatePhoto: function() {
		var t = this.data.rotate;
		t >= 360 ? (t = 0) : (t += 90);
		this.setData({
			rotate: t
		});
	},
	startCrop: function() {
		// 裁剪框的初始位置
		var t = this.data.imgLeft + (this.data.imgWidth - 150) / 2,
			i = this.data.imgTop + (this.data.imgHeight - 100) / 2;
		this.setData({
			isCroper: true,
			cutL: t,
			cutT: i,
			cutW: 150,
			cutH: 100
		});
	},
	cancelCrop: function() {
		this.setData({
			isCroper: false
		});
	},
	competeCrop: function() {
		var t = this;
		const _data = this._data;
		wx.showLoading({
			title: "请稍后",
			mask: !0
		});
		let { oldScale } = this._data;
		var i = ((t.data.cutL - t.data.imgLeft) * _data.initRatio) / oldScale,
			e = ((t.data.cutT - t.data.imgTop) * _data.initRatio) / oldScale,
			a = (t.data.cutW * _data.initRatio) / oldScale,
			c = (t.data.cutH * _data.initRatio) / oldScale;
		t.setData({
			isCroper: !1,
			tempCanvasWidth: a,
			tempCanvasHeight: c
		});
		if (a < (_data.scaleWidth * _data.initRatio) / oldScale / 2) {
			(a *= 2), (c *= 2);
		}

		var n = wx.createCanvasContext("tempCanvas");
		n.drawImage(t.data.tempImageSrc, i, e, a, c, 0, 0, a, c),
			n.draw(),
			t.saveImageFromTempCanvas({
				delay: 100,
				success: function(i) {
					t.reloadImage();
				},
				fail: function(i) {
					t.reloadImage();
				},
				complete() {
					wx.hideLoading();
				}
			});
	}
});

